
<template>
  <div class="main-div">
      <Card dis-hover class="task-card">
        <el-form :inline="true" :model="queryForm" size='mini' label-width="88px"  style="margin-left: -25px;">


          <el-form-item label="内置" label-width="68px">
            <el-select v-model="queryForm.system" placeholder="请选择" clearable>
              <el-option
                v-for="item in systemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="来源">
            <el-select v-model="queryForm.dsType" placeholder="请选择" clearable>
              <el-option
                v-for="item in dsTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="queryForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="别名">
            <el-input v-model="queryForm.alias" clearable></el-input>
          </el-form-item>
          <el-form-item  >
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="default" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>


        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" size="mini" @click="add('inner')">新增</el-button>

          </el-col>
          <el-col :span="1.5">          <el-button  @click="synchronization" type="success"  size="mini">导出</el-button>


          </el-col>
          <el-col :span="1.5">
            <data-source :value="multipleSelection" tableName="pangu_form_custom_Dialog"></data-source>

          </el-col>
          <el-col :span="1.5">
            <el-button
              type="cyan"
              size="mini"
              :disabled="multiple"
              @click="handleEs"
            >同步到ES
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除
            </el-button>
          </el-col>

        </el-row>




        <el-row style="margin-top: 10px">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @selection-change="handleSelectionChange"

            >
              <el-table-column
                type="selection"
                fixed
                width="55">
              </el-table-column>
              <el-table-column
                label="序号"
                fixed
                type="index"
                width="50"
                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                width='180'
                fixed
                show-overflow-tooltip
              />
              <el-table-column
                prop="alias"
                label="别名"
                show-overflow-tooltip
              />
              <el-table-column
                prop="system"
                label="系统内置"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.system" type="success">是</el-tag>
                  <el-tag v-else type="warning">否</el-tag>
                </template>

              </el-table-column>
              <el-table-column
                prop="style"
                label="显示样式"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.style=='1'" type="info">列表</el-tag>
                  <el-tag v-else type="info">树形</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="dsType"
                label="数据来源"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.dsType=='dataSource'" type="info">&nbsp; 数据源&nbsp; &nbsp; </el-tag>
                  <el-tag v-else type="info">REST接口</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="objName"
                label="对象名称"
                show-overflow-tooltip
              />
              <el-table-column
                prop="dsAlias"
                label="数据源的别名"
                show-overflow-tooltip
              />


              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button   size='mini' type='text' icon="el-icon-edit"   @click="handleClick(scope.row)">编辑</el-button>
                  <el-divider direction="vertical"></el-divider>

                  <el-button   size='mini' type='text' icon="el-icon-delete"   @click="handleDelClick(scope.row)">删除</el-button>

                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </Card>


  </div>

</template>

<script>
import { getTypesByKey,businessObjectGetStruct,customDialogList,removeCustomDialog
,synchronizationDialog,
  removeCustomDialogEs
} from '@/api/form'
import { download } from '@/api/analy'
import DataSource from '@/components/plug/DataSource'


export default {
  name: 'Task',
  components: {
    DataSource
  },

  data() {
    return {
      multiple: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      multipleSelection: [],

      systemOptions: [{
        value: '1',
        label: '是'
      }, {
        value: '0',
        label: '否'
      }],
      dsTypeOptions: [{
        value: 'restful',
        label: '接口'
      }, {
        value: 'dataSource',
        label: '数据源'
      }],
      cmOptions:{
        value:'',
        mode:"application/json",
        theme: "ambiance",
        readOnly:true,
      },
      busObj:false,
      busStruct:"",
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      queryForm: {
        groupId: '',
        queryForm: '',
        name: '',
        alias: '',
        page: 1,
        pageSize: 10,
        limit: 10
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    this.initData()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map(item => item.id)
      this.single = val.length !== 1
      this.multiple = !val.length
    },
    synchronization(){
      synchronizationDialog(this.multipleSelection).then((response) => {
        download(response,'对话框信息')
      })
    },
    getStruct:function(data){
      this.busObj=true;
      businessObjectGetStruct(data.id).then((response) => {
        this.busStruct = response.data
      })
    },
    add: function(type) {
      this.$router.push({ name: 'customdialogAdd', query: { t: new Date().getTime() }})
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      if (data[0].parentId == '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.queryForm.page=1

      this.getData()
    },
    queryMethod: function() {
      this.getData();
    },
    getTypesByKeyAction:function(){
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData:function(){
      this.getTypesByKeyAction();
      this.getData();
    },
    getData: function() {

      customDialogList(this.queryForm).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'customdialogAdd', query: { t: new Date().getTime() ,'id':data.id,"edit":false}})


    },
    handleDelete(){
      removeCustomDialog({ids:this.ids}).then((response) => {
        if (response.code == 0) {
          this.getData()
        } else {
          this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

        }
      })
    },
    handleEs(){
      removeCustomDialogEs({ids:this.ids}).then((response) => {
        if (response.code == 0) {
          this.$message({"duration": 800, message: '同步成功', type: 'success', customClass: 'zZindex'});
        } else {
          this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

        }
      })
    },
    handleDelClick(data) {
      var ids=[]
      ids.push(data.id);
      removeCustomDialog({ids:ids}).then((response) => {
        if (response.code==0){
          this.getData()
        }else{
          this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

        }


      })
    },
    search() {
      this.queryForm.page = 1
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.system = ''
      this.queryForm.dsType = ''
      this.queryForm.alias = ''
      this.queryForm.createTime = ''
      this.queryForm.whereSql = ''
      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss" scoped>
.task-card{
  margin-top: 10px;
}
.main-div {
  background-color: #f3f3f3!important;
}
</style>
<style lang="scss" scoped>
  /* button color */
  .el-button--cyan.is-active,
  .el-button--cyan:active {
    background: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
  }

  .el-button--cyan:focus,
  .el-button--cyan:hover {
    background: #48D1CC;
    border-color: #48D1CC;
    color: #FFFFFF;
  }

  .el-button--cyan {
    background-color: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
  }

  /* text color */
  .text-navy {
    color: #1ab394;
  }

  .text-primary {
    color: inherit;
  }

  .text-success {
    color: #1c84c6;
  }

  .text-info {
    color: #23c6c8;
  }

  .text-warning {
    color: #f8ac59;
  }

  .text-danger {
    color: #ed5565;
  }

  .text-muted {
    color: #888888;
  }

  /* image */
  .img-circle {
    border-radius: 50%;
  }

  .img-lg {
    width: 120px;
    height: 120px;
  }

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
  }

  /* 拖拽列样式 */
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .top-right-btn {
    position: relative;
    float: right;
  }

  .main-div {
    background-color: white !important;
  }

</style>
